<template>
  <l-layout>
    <l-panel>
      <template #toolLeft>
        <div class="l-panel--item">
          <el-radio-group
            v-model="categoryId"
            :disabled="tableLoading"
            size="mini"
            @change="handleCaregoryChange"
          >
            <el-radio-button label="1">Login</el-radio-button>
            <!-- <el-radio-button label="2">访问</el-radio-button> -->
            <el-radio-button label="3">操作</el-radio-button>
            <!-- <el-radio-button label="4">异常</el-radio-button> -->
          </el-radio-group>
        </div>
        <div class="l-panel--item" style="width: 344px">
          <el-date-picker
            v-model="operateTime"
            size="mini"
            type="daterange"
            align="right"
            unlink-panels
            :range-separator="$t('至')"
            :start-placeholder="$t('开始日期')"
            :end-placeholder="$t('结束日期')"
            :picker-options="pickerOptions"
            @change="handleDateChange"
          >
          </el-date-picker>
        </div>

        <div class="l-panel--item">
          <el-input
            :placeholder="$t('please enter IP/功能/类型')"
            v-model="keyWord"
            size="mini"
            @keyup.enter.native="hanleSearch"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="hanleSearch"
            ></el-button>
          </el-input>
        </div>
      </template>
      <template #toolRight>
        <l-tool-btns :hasAdd="false">
        </l-tool-btns>
      </template>
      <l-table
        :loading="tableLoading"
        :columns="lr_getPageColumns(columns)"
        :dataSource="tableData"
        row-key="f_Id"
        :isPage="true"
        :pageTotal="tableTotal"
        :tablePage.sync="tableCurrentPage"
        @loadPageData="turnTablePage"
      >
        <template v-slot:f_OperateTime="scope">
          {{ lr_dateFormat(scope.row.f_OperateTime) }}
        </template>
        <template v-slot:f_Category="scope">
          {{ lr_dataItemDetailsName("FormSort", scope.row.f_Category) }}
        </template>
        <template v-slot:f_ExecuteResult="scope">
          <el-tag
            v-if="scope.row.f_ExecuteResult == 1"
            size="mini"
            type="success"
            >{{ $t('成功') }}</el-tag
          >
          <el-tag v-else size="mini" type="danger">{{ $t('失败') }}</el-tag>
        </template>
      </l-table>
    </l-panel>
  </l-layout>
</template>

<script>
const api = window.$api.system.log;
export default {
  data() {
    return {
      lr_isPage: true,

      categoryId: "1",
      operateTime: null,
      pickerOptions: {},

      // 表格
      columns: [
        { label: "时间", prop: "f_OperateTime", width: "160" },
        {
          label: "用户",
          prop: "f_OperateAccount",
          width: "120",
          align: "center",
        },
        {label:'姓名',prop:'f_OperateUserId',width:'120',align:'center',dataType: "user",},
        { label: "IP", prop: "f_IPAddress", width: "120" },
        { label: "功能", prop: "f_Module", width: "200" },
        // { label: "类型", prop: "f_OperateType", width: "64", align: "center" },
        {
          label: "结果",
          prop: "f_ExecuteResult",
          width: "64",
          align: "center",
        },
        { label: "描述", prop: "f_ExecuteResultJson", minWidth: "150" },
      ],
      tableLoading: false,
      tableTotal: 0,
      tablePageSize: 50,
      tableCurrentPage: 1,
      tableData: [],
      keyWord: "",

      formVisible: false,
      keepTime: "7",
    };
  },
  computed: {},
  mounted() {
    this.loadTablePageData();
  },
  methods: {
    async loadTablePageData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      const date = this.newDate(this.operateTime)
      let queryData = {
        rows: this.tablePageSize,
        page: this.tableCurrentPage,
        sidx: "F_OperateTime DESC,F_SourceObjectId DESC",
        categoryId: this.categoryId,
        keyword: this.keyWord,
        startTime: date ? date[0] : null,
        endTime: date ? date[1] : null,
      };
      const data = await this.$awaitWraper(api.getSecurePage(queryData));

      if (data) {
        this.tableData = data.rows;
        this.tableTotal = data.records;
      } else {
        this.tableData = [];
        this.tableTotal = 0;
      }
      this.tableLoading = false;
    },
    newDate(timeArr) {
      const dateArr = [];
      if (!timeArr) return
      timeArr.map((time) => {
        let date = new Date(time);
        let y = date.getFullYear();
        let m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        let d = date.getDate();
        d = d < 10 ? "0" + d : d;
        dateArr.push(y + "-" + m + "-" + d);
      });
      return dateArr;
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTablePageData(true);
    },
    handleCaregoryChange() {
      this.loadTablePageData();
    },
    handleDateChange() {
      this.loadTablePageData();
    },
    hanleSearch() {
      this.loadTablePageData();
    },
    handleOpenForm() {
      this.formVisible = true;
    },
    handleCloseForm() {
      this.keepTime = "7";
    },
  },
};
</script>